<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>工作经历</title>
    <link rel="icon" type="image/png" href="/img/icon.png">
    <script type="text/javascript" src="/h5/newall/newall.js"></script>
    <link rel="stylesheet" type="text/css" href="/h5/newall/newall.css">
</head>

<div class="mui-content-padded H5body basedata">
    <div class="topmsg">
        <p class="msgtext">注册填写/上传的信息越全面，客户信任度越高</p>
    </div>
    <MCform id="Form" class="mctag">
        <MCtitle class="mctag" subtitle="新增" subtitleOn="onNewli()">工作经历</MCtitle>
        <div mcname="gongzuojingliArray" v-for="(obj,key) in gongzuojingliArray" class="content" v-bind:class="{newli:obj.newli}">

            <h4 name="title" class="title">工作经历{{key+1}}</h4>
            <a class="red btn">删除</a>
            <ul class="baseul">
                <li class="li">
                    <p class="title">专业</p>
                    <input type="text" placeholder="请输入"
                           v-model="obj.zhuanye" name="zhuanye"
                           class="mui-input">
                </li>
                <li class="li">
                    <p class="title">职位</p>
                    <input type="text" placeholder="请输入"
                           v-model="obj.zhiwei" name="zhiwei"
                           class="mui-input">
                </li>
                <li class="li">
                    <p class="title">起止时间</p>
                    <div class="shuangshur clearfix">
                        <mcdate :mcname="'xueli1_'+key" :defaultval="obj.xueli1" :value="obj.xueli1"
                                v-model="obj.xueli1" name="xueli1"
                                class="mui-btn-block mctag mui-input-clear muiDtPicker mcdatainput mcdatainput1">未选择日期
                        </mcdate>
                        <span class="line"></span>
                        <mcdate :mcname="'xueli2_'+key" :defaultval="obj.xueli2" :value="obj.xueli2"
                                v-model="obj.xueli2" name="xueli2"
                                class="mui-btn-block mctag mui-input-clear muiDtPicker mcdatainput mcdatainput2">未选择日期
                        </mcdate>
                    </div>
                </li>
                <li class="li">
                    <p class="title">离职原因</p>
                    <textarea class="textarea"
                              rows="5" name="lizhiyuanyin"
                              placeholder="请输入"
                              :mcname="'lizhiyuanyin'+key" v-model="obj.lizhiyuanyin"></textarea>
                </li>
                <li class="li">
                    <p class="title">岗位职责</p>
                    <textarea class="textarea"
                              rows="5" name="gangweizhineng"
                              placeholder="请输入"
                              :mcname="'gangweizhineng'+key" v-model="obj.gangweizhineng"></textarea>
                </li>


            </ul>
        </div>
        <button id="submit" type="submit"
                class="mui-btn mui-btn-primary" >
            保存
        </button>


        <input type="hidden" mcname="position" id="position" value=""/>
    </MCform>
</div>

<script type="text/javascript" src="/h5/js/all2.js"></script>
</body>
<style>
    .mctag .content.newli {
        background-color: rgb(222 248 255);
    }

    MCform .content.newli .li mcselect.mctag {
        background-color: rgb(222 248 255);
    }

    MCform .content.newli .li .mui-input {
        background-color: rgb(222 248 255);
    }

    .mctag .content {
        position: relative;
    }

    .mctag .content .red {
        position: absolute;
        top: 0.2rem;
        right: 0;
        font-size: 0.16rem;
    }
</style>
<script>
    var view = new MC.View.MCform('#Form');
    MC.apiD('getuser_gongzuojingli_gr', {}, function (json) {
        console.log(json);
        if (json.gongzuojingliArray == null || json.gongzuojingliArray.length == 0) {
            json.gongzuojingliArray = [{
                zhuanye: "",
                zhiwei: '',
                xueli1: '',
                xueli2: '',
                lizhiyuanyin: '',
                gangweizhineng: '',
            }];
        }
        view.vue.gongzuojingliArray = json.gongzuojingliArray;
        setTimeout(function () {
            view.createEvent();
        }, 2);
    });

    /**
     * {
        zhuanye:"专业1",
        zuigaoxueli:1,
        biyeyuanxiao:'毕业院校1',
        xueli1:'1989-01-02',
        xueli2:'2020-12-02',
    }*/
    function onNewli() {
        tongbutoview(function () {
                var newlist = {
                    newli: 'newli',
                    zhuanye: "",
                    zhiwei: '',
                    xueli1: '',
                    xueli2: '',
                    lizhiyuanyin: '',
                    gangweizhineng: '',
                };
                view.vue.gongzuojingliArray.push(newlist);
                console.log('onNewli()');

                setTimeout(function () {
                    $("html").scrollTop($("html")[0].scrollHeight);
                    $("body").scrollTop($("body")[0].scrollHeight);
                    view.createEvent();
                    setTimeout(function () {
                        $("html").scrollTop($("html")[0].scrollHeight);
                        $("body").scrollTop($("body")[0].scrollHeight);
                        newlist.newli = '';
                    }, 800);
                }, 10);
            }
        );
    }

    function tongbutoview(fun) {
        var gongzuojingliArray = $('#Form [mcname=gongzuojingliArray]');
        var list = [];
        for (var i = 0; i < gongzuojingliArray.length; i++) {
            var one = $(gongzuojingliArray[i]);
            var zhuanye = one.find('[name=zhuanye]').val();
            var zhiwei = one.find('[name=zhiwei]').val();
            var xueli1 = one.find('[name=xueli1]').val();
            var xueli2 = one.find('[name=xueli2]').val();
            var lizhiyuanyin = one.find('[name=lizhiyuanyin]').val();
            var gangweizhineng = one.find('[name=gangweizhineng]').val();
            list.push({
                title: one.find('[name=title]').text(),
                zhuanye: zhuanye,
                zhiwei: zhiwei,
                lizhiyuanyin: lizhiyuanyin,
                gangweizhineng: gangweizhineng,
                xueli1: xueli1,
                xueli2: xueli2,
            });
        }
        view.vue.gongzuojingliArray = [];
        setTimeout(function () {
            view.vue.gongzuojingliArray = list;
            setTimeout(function () {
                fun && fun();
            }, 100);

        }, 10);
    }

    $('.mctag').on('click', '.content .red', function () {
        var content = $(this).parents('.content');
        var title = content.find('[name=title]').text();
        MC.msg.confirm("是否删除(" + title + ")?", function () {
            content.remove();
            // content.add
            setTimeout(function () {
                tongbutoview(function(){
                    view.createEvent();
                });
            }, 100);
        });
    });

    $('#submit').on('click', function () {
        tongbutoview(function () {
            view.createEvent();
            for (var i = 0; i < view.vue.gongzuojingliArray.length; i++) {
                var one = view.vue.gongzuojingliArray[i];
                one.title = '(' + one.title + ')';
                if (!one.zhuanye || one.zhuanye == '') {
                    return MC.msg.alert(one.title + "的专业必须填写");
                }
                if (!one.zhiwei || one.zhiwei == '') {
                    return MC.msg.alert(one.title + "的职位历必须填写");
                }
                if (!one.xueli1 || one.xueli1 == '') {
                    return MC.msg.alert(one.title + "的起止时间1必须填写");
                }
                if (!one.xueli2 || one.xueli2 == '') {
                    return MC.msg.alert(one.title + "的起止时间2必须填写");
                }
                if (!one.lizhiyuanyin || one.lizhiyuanyin == '') {
                    return MC.msg.alert(one.title + "的离职原因必须填写");
                }
                if (!one.gangweizhineng || one.gangweizhineng == '') {
                    return MC.msg.alert(one.title + "的岗位只能必须填写");
                }
            }
            var json = JSON.stringify(view.vue.gongzuojingliArray);

            console.log(json);
            MC.apiD('setuser_gongzuojingli_gr', {
                gongzuojingliArray: json
            }, function () {
                MC.msg.show('保存成功');
            });
        });
    });

</script>
</body>
</html>